<template>
  <div class="vocation-container">
    <el-tabs type="card">
      <el-tab-pane label="请假审核">

        <el-button type="success"
                   v-show="isMultipleOrder"
                   plain
                   style="width: 100%"
                   @click="handleConfirmationMultiple(multipleSelection)"
        >批量通过
        </el-button>

        <el-table
            :border="true"
            :data="list"
            highlight-current-row
            max-height="680"
            style="width: 100%"

            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
        >

          <el-table-column
              type="selection"
              width="55"/>
          <el-table-column label="序号" type="index" width="50"></el-table-column>
          <el-table-column
              label="请假时间"
              prop="courseabsentDatetime"
          ></el-table-column>
          <el-table-column
              label="请假理由"
              prop="courseabsentContent"
          />
          <!--      考虑的到相关信息之后换下编号-->
          <el-table-column
              label="姓名"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.volunteerEntity.volunteerName }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="课程名称"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.teachingscheduleEntity.courseEntity.courseName }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="开课日期"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.teachingscheduleEntity.teachingscheduleDate|toUtcTime2 }}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="开课时间"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.teachingscheduleEntity.teachingscheduleBegintime }}</span>
            </template>
          </el-table-column>

          <el-table-column :fit="true" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="success"
                  @click="handleAgree(scope.row)"
              >同意
              </el-button>
              <el-popconfirm
                  cancel-button-text="取消"
                  confirm-button-text="确定"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定拒绝么？"
                  @confirm="handleDelete(scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger">拒绝</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>
    </el-tabs>

    <el-pagination
        :current-page="currentPage"
        :page-size="currentPageSize"
        :page-sizes="[10,50,100,500,1000,99999]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleGetBySizeActivity"
        @current-change="handleGetByNumActivity"/>
    <el-dialog :visible.sync="option.action.refuse" title="请输入拒绝原因">
      <el-input v-model="option.action.reason" placeholder="请输入拒绝原因" type="textarea"></el-input>
      <span slot="footer">
          <el-button @click="handleConfirmLeave(option.action)">确认</el-button>
          <el-button>取消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      reasonShow: false,
      option: {
        action: {
          refuse: false,
          id: null,
          reason: "",
        },

      },
      multipleSelection: [],

    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetAudit();
    },

    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      let res = await this.$http.managerGetToAuditCourse(params);
      if (res.code !== 0) return null;
      this.content = res.data;
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetAudit();
    },
    async handleGetAudit () {
      let pageNum = this.currentPage;
      let pageSize = this.currentPageSize;
      const res = await this.$http.managerGetToAuditCourse({
        pageNum,
        pageSize,
      });
      if (res.code !== 0) return null;
      console.log(res);
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },
    async handleAgree (info) {
      let params = {
        courseAbsentId: info.courseabsentId,
        reason: "",
        status: 1,
      };
      const res = await this.$http.managerAuditCourse(params);
      if (res.code !== 0) return null;
      return this.$router.go(0);
    },
    async handleDelete (info) {

      this.option.action.id = info.courseabsentId;
      this.option.action.refuse = true;
    },
    async handleConfirmLeave (info) {
      let params = {
        courseAbsentId: info.id,
        reason: info.reason,
        status: 0,
      };
      const res = await this.$http.managerAuditCourse(params);
      if (res.code !== 0) return null;
      return this.$router.go(0);
    },
    handleSelectionChange (value) {
      // console.log(`value-->`, value);
      this.multipleSelection = value;

    },
    async handleConfirmationMultiple (multipleSelection) {
      if (multipleSelection.length === 0) return null;
      console.log(`multipleSelection-->`, multipleSelection);
      const leaveId = multipleSelection.map((item) => {
        return item.courseabsentId;
      });
      console.log(`idList-->`, leaveId);

      const res = await this.$http.batchAuditCourse({ leaveId });
      console.log(` res-->`, res);
      if (res.code !== 0) return this.$alert("出错啦");
      // const  res = await this.handleGetActivityLeaveInfo();
      // await this.handleGetByNumActivity(1);
      await this.handleGetByNumActivity(1);

      return this.$alert("处理成功");

    },

  },

  computed: {
    isMultipleOrder () {
      return this.multipleSelection.length !== 0;
    },
  },
};
</script>
